<template>
  <el-dialog width="50%" v-model="dialogVisible" :before-close="handleClose" :title="title" v-if="dialogVisible">
    <div>
      <ComputeScheme :showLeft="false" :schemeData="state.schemeData" />
    </div>
    <template #footer>
      <div class="btn-group">
        <el-button type="primary" @click="handleClose">确定</el-button>
        <el-button type="primary" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleUpdateSection">修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import emitter from '@/utils/bus'
import ComputeScheme from '@/components/app-publicui/compute-scheme.vue'
//api
import { getSectionSchemeInfos } from '@/services/modules/compute-methods'
//pinia
import { useUnitInfo, useBlkcd } from '@/store/modules/compute-methods.js'
const dialogVisible = ref(false)
const title = ref('')
const state = reactive({
  schemeData: [],
  blkcd: '',
  schemeDetail: {}
})
function handleClose() {
  dialogVisible.value = false
  useUnitInfo().$reset()
  useBlkcd().$reset()
  emitter.emit('resetSection', true)
}
function handleUpdateSection() {
  emitter.emit('handleUpdateSection', useBlkcd().blkcd)
  dialogVisible.value = false
}
//订阅
const subscribe = useUnitInfo().$subscribe(
  (mutation, state) => {
    console.log(state)

    if (state.unitShow == true && useBlkcd().status == 1) {
      dialogVisible.value = true
      title.value = useBlkcd().blknm
      openDialog(useBlkcd().blkcd)
    }
  },
  { detached: false }
)
//打开
const openDialog = (blkcd) => {
  dialogVisible.value = true
  state.blkcd = blkcd
  getSectionSchemeInfos({ blkcd: blkcd }).then((res) => {
    if (res.code === 200) {
      state.schemeData = res.data
    }
  })
}
</script>
<style lang="less" scoped>
.dialog-header {
  padding: 0 25px;
  border-bottom: 1px solid black;
}
.btn-group {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
</style>
